<template>
  <div class="header-bar">
    <div class="custom-content-con">
      <div class="user-avatar-dropdown">
        <Dropdown @on-click="logout">
          <Badge>
            <Avatar :src="require('@/assets/img/sanweiguo.jpg')"/>
          </Badge>
          <Icon :size="18" type="md-arrow-dropdown"></Icon>
          <DropdownMenu slot="list">
            <DropdownItem name="message">
              消息中心<Badge style="margin-left: 10px" :count="6"></Badge>
            </DropdownItem>
            <DropdownItem name="logout">退出登录</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'HeaderBar',
  methods: {
    logout () {
      this.$store.dispatch('user/Logout')
      setTimeout(() => {
        location.reload()
      }, 300)
    }
  }
}
</script>
<style scoped lang="less">
  .header-bar{
    width: 100%;
    height: 100%;
    position: relative;
    .custom-content-con{
      float: right;
      height: auto;
      padding-right: 20px;
      line-height: 64px;
      & > *{
        float: right;
      }
      .user-avatar-dropdown{
        cursor: pointer;
        display: inline-block;
        // height: 64px;
        vertical-align: middle;
        // line-height: 64px;
        .ivu-badge-dot{
          top: 16px;
        }
      }
    }
  }

</style>
